<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div v-loading="loading">
    <!-- 操作 -->
   <div class="group_title">
     添加权限
   </div>
    <div class="operation">
<!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
      <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
      <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
      <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

    </div>
    <!-- table start  -->
    <el-table ref="multipleTable" :data="list" border style="width: 100%;"  @selection-change="selsChange" >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="resourceName" width="150"  label="权限名称">
      </el-table-column>
      <el-table-column prop="resourceDesc"  label="权限描述">
      </el-table-column>
          
    </el-table>
    <!-- table end  -->
    <!--工具条-->
    <el-col :span="24" class="toolbar toolbar_footer">
      <el-button type="primary" @click="batchRemove" :disabled="this.sels.length===0">保存</el-button>
      <!-- <el-pagination v-if="total" layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
      </el-pagination> -->
    </el-col>
  </div>
</template>

<script>
import * as authority from '../api/authority';

let myMixin = {
  data: function() {
    return { authority }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      filters:{name:''},//搜索表单
     
      sels: [],//列表选中列

      list: [],
      canReset: true,
      loading: false,
      roleId:'',
      roleIdSelect:[],//已经有的角色id
      roleArr:[],//所有角色id
    }
  },
  methods: {
    checked(index){
      //首先el-table添加ref="table"引用标识
      this.$refs.multipleTable.toggleRowSelection(this.list[index],true);
    },
   selectCheck(){
      let index=0;
      if(this.roleIdSelect!=undefined&&this.roleIdSelect!="undefined"&&this.roleIdSelect!=''){

         this.roleIdSelect.map(x=>{

           for(var i=0;i<this.roleArr.length;i++){
             if(this.roleArr[i]==x){
               this.checked(i);//每次更新了数据，触发这个函数即可。
             }
           }

         })
      }
     

    },
    selsChange: function (sels) {//多选框
      this.sels = sels;
    },
    batchRemove: function () {//批量保存
      var ids = this.sels.map(item => item.resourceId).toString();
      let para = {
        roleId:this.roleId,
        resourceIdList:ids
      };
   
      authority.add.r(para).then((res) => {
        if(res.data.retCode==1){
          //添加权限成功
          this.addFormVisible = false;
          this.$message("添加权限成功");
          this.$parent.fetchData();
          this.$router.push(this.$parent.$route.matched[2].path);
        }else{
          this.$message(res.data.retMsg);
        }
        
      });
    },
    getUsers(){
      //获取用户列表数据
    },
 
    fetchData(init) {
   
      authority.request.r().then((res) => {
        if(res.data.retCode==1){
          this.total=res.data.data.totalRow;
          this.list = res.data.data;
          this.list.map(x=>{
            this.roleArr.push(x.resourceId);            
          })
        this.fetchDataList();

        }else{
          this.$message(res.data.retMsg);
        }
        
        this.loading = false;
      })
    },
    fetchDataList() {
      
        let para = {
         roleId:this.roleId 
        };
      authority.request.r(para).then((res) => {
        if(res.data.retCode==1){
          res.data.data.map(x=>{
            this.roleIdSelect.push(x.resourceId);

          })

        this.selectCheck();
         
        }else{
          this.$message(res.data.retMsg);
        }        
        
      })
    },
    requestNotAllowed: function(){
      authority.notAllowed.r();
    }
  },
  created() {
    this.roleId=this.$route.query.roleId;

    this.fetchData(true)
  }
}
</script>